import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:get/get.dart';
import 'package:yi_shop/route/index.dart';
import 'package:yi_shop/utils/colors.dart';
import 'package:yi_shop/utils/styles.dart';
import 'package:yi_shop/utils/svg.dart';

class StayEvaluateController extends GetxController {}

class StayEvaluateView extends GetView<StayEvaluateController> {
  const StayEvaluateView({super.key});

  @override
  Widget build(BuildContext context) {
    return ListView(
      itemExtent: 210,
      children: [
        for (var i = 0; i < 10; i++)
          Container(
            margin: const EdgeInsets.only(top: 15),
            color: Colors.white,
            padding: const EdgeInsets.only(left: 20, right: 15),
            child: Column(
              children: [
                Container(
                  padding: const EdgeInsets.only(top: 10, bottom: 15),
                  alignment: Alignment.centerLeft,
                  child: Wrap(
                    spacing: 15,
                    alignment: WrapAlignment.start,
                    crossAxisAlignment: WrapCrossAlignment.center,
                    children: [
                      SvgUtils.assetName('u14777', width: 20, height: 20),
                      Text(
                        '阔步前行女街坊',
                        style: StylesUtils.customTextStyle(color: ColorsUtils.color6666),
                      ),
                      Icon(
                        Icons.arrow_forward_ios,
                        color: ColorsUtils.parseColorFromHexString(ColorsUtils.color6666),
                        size: 12,
                      )
                    ],
                  ),
                ),
                Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    ClipRRect(
                      borderRadius: BorderRadius.circular(5),
                      child: CachedNetworkImage(
                        imageUrl:
                            'https://gw.alicdn.com/bao/uploaded/i3/619123122/O1CN01f3Ymx81YvvStanwoo_!!0-item_pic.jpg_210x210q75.jpg_.webp',
                        width: 90,
                        height: 90,
                        fit: BoxFit.fill,
                      ),
                    ),
                    Expanded(
                        child: Padding(
                      padding: const EdgeInsets.only(left: 10),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Container(
                            alignment: Alignment.centerLeft,
                            child: Text(
                              '平底包头凉鞋女2019夏季新款网红女鞋韩版百搭后空一字带',
                              maxLines: 2,
                              overflow: TextOverflow.ellipsis,
                              style: StylesUtils.customTextStyle(
                                  color: ColorsUtils.color6666,
                                  fontSize: StylesUtils.fontSize13,
                                  lineHeight: 1.3.h),
                            ),
                          ),
                          Container(
                            margin: const EdgeInsets.symmetric(vertical: 10),
                            alignment: Alignment.centerLeft,
                            child: Text(
                              '米白色；36',
                              style: StylesUtils.customTextStyle(
                                  fontSize: StylesUtils.fontSize12, color: ColorsUtils.color9999),
                            ),
                          ),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Text(
                                '￥24.90',
                                style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                              ),
                              Text(
                                'x 1',
                                style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                              )
                            ],
                          )
                        ],
                      ),
                    ))
                  ],
                ),
                Container(
                  margin: const EdgeInsets.only(top: 10),
                  alignment: Alignment.centerRight,
                  child: Wrap(
                    spacing: 20,
                    crossAxisAlignment: WrapCrossAlignment.center,
                    alignment: WrapAlignment.end,
                    children: [
                      TextButton(
                          onPressed: () {},
                          style: ButtonStyle(
                              minimumSize: const MaterialStatePropertyAll(Size(70, 30)),
                              padding: const MaterialStatePropertyAll(EdgeInsets.zero),
                              alignment: Alignment.center,
                              shape: MaterialStatePropertyAll(RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(5),
                                  side: BorderSide(
                                      color: ColorsUtils.parseColorFromHexString(
                                          ColorsUtils.color7979))))),
                          child: Text(
                            '查看订单',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color3333, fontSize: StylesUtils.fontSize13),
                          )),
                      TextButton(
                          onPressed: () {
                            Get.toNamed(RoutePath.evaluatePublish);
                          },
                          style: ButtonStyle(
                              minimumSize: const MaterialStatePropertyAll(Size(70, 30)),
                              padding: const MaterialStatePropertyAll(EdgeInsets.zero),
                              alignment: Alignment.center,
                              shape: MaterialStatePropertyAll(RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(5),
                                  side: BorderSide(
                                      color: ColorsUtils.parseColorFromHexString(
                                          ColorsUtils.colorF048))))),
                          child: Text(
                            '评价',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.colorF048, fontSize: StylesUtils.fontSize13),
                          )),
                    ],
                  ),
                )
              ],
            ),
          ),
      ],
    );
  }
}

class RatedEvaluateController extends GetxController {}

class RatedEvaluateView extends GetView<RatedEvaluateController> {
  const RatedEvaluateView({super.key});

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        for (var i = 0; i < 10; i++)
          Container(
            margin: const EdgeInsets.only(top: 15),
            color: Colors.white,
            padding: const EdgeInsets.only(left: 15, right: 20),
            alignment: Alignment.centerLeft,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Padding(
                  padding: const EdgeInsets.only(top: 15),
                  child: Wrap(
                    spacing: 15,
                    crossAxisAlignment: WrapCrossAlignment.center,
                    alignment: WrapAlignment.start,
                    children: [
                      const CircleAvatar(
                        radius: 15,
                        backgroundImage: CachedNetworkImageProvider(
                            'https://img2.baidu.com/it/u=974266726,301238869&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=501'),
                      ),
                      Text(
                        'qxhlld321',
                        style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                      )
                    ],
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.symmetric(vertical: 10),
                  child: Text(
                    '04-18 颜色分类:红色 尺码:均码',
                    style: StylesUtils.customTextStyle(
                        color: ColorsUtils.color9999, fontSize: StylesUtils.fontSize12),
                  ),
                ),
                Text(
                  '衣服太好看了，可以搭配裤子，也可以搭配裙子。非常棒，没有色差。',
                  style:
                      StylesUtils.customTextStyle(color: ColorsUtils.color3333, lineHeight: 1.35.h),
                ),
                Padding(
                  padding: const EdgeInsets.symmetric(vertical: 15),
                  child: StaggeredGrid.count(
                    crossAxisCount: 3,
                    mainAxisSpacing: 15,
                    children: [
                      Center(
                        child: ClipRRect(
                          borderRadius: BorderRadius.circular(5),
                          child: CachedNetworkImage(
                            imageUrl:
                                'https://gw.alicdn.com/bao/uploaded/i1/2206567368008/O1CN01Dqtcqi291idzZmygJ_!!2206567368008-0-C2M.jpg_210x210q75.jpg_.webp',
                            width: 90,
                            height: 90,
                            fit: BoxFit.fill,
                          ),
                        ),
                      ),
                      Center(
                        child: ClipRRect(
                          borderRadius: BorderRadius.circular(5),
                          child: CachedNetworkImage(
                            imageUrl:
                                'https://gw.alicdn.com/bao/uploaded/i1/2206567368008/O1CN01ZElmH5291iduK7AOG_!!2206567368008-0-C2M.jpg_210x210q75.jpg_.webp',
                            width: 90,
                            height: 90,
                            fit: BoxFit.fill,
                          ),
                        ),
                      ),
                      Center(
                        child: ClipRRect(
                          borderRadius: BorderRadius.circular(5),
                          child: CachedNetworkImage(
                            imageUrl:
                                'https://gw.alicdn.com/bao/uploaded/i3/2206567368008/O1CN015mCDZI291idfm7YFZ_!!2206567368008-0-C2M.jpg_210x210q75.jpg_.webp',
                            width: 90,
                            height: 90,
                            fit: BoxFit.fill,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    ClipRRect(
                      borderRadius: const BorderRadius.only(
                          topLeft: Radius.circular(5), bottomLeft: Radius.circular(5)),
                      child: CachedNetworkImage(
                        imageUrl:
                            'https://gw.alicdn.com/bao/uploaded/i3/2206567368008/O1CN01A53FO8291idfFHQp3_!!2206567368008-0-C2M.jpg_210x210q75.jpg_.webp',
                        width: 90,
                        height: 90,
                        fit: BoxFit.fill,
                      ),
                    ),
                    Expanded(
                        child: Container(
                      padding: const EdgeInsets.only(left: 10, right: 15),
                      height: 90,
                      decoration: BoxDecoration(
                          borderRadius: const BorderRadius.only(
                              topRight: Radius.circular(5), bottomRight: Radius.circular(5)),
                          color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF2f2)),
                      alignment: Alignment.centerLeft,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Container(
                            margin: const EdgeInsets.only(top: 10),
                            alignment: Alignment.centerLeft,
                            child: Text(
                              '复古百搭提花加厚开衫毛衣外套女韩版2018新款宽松学生上衣针织衫',
                              maxLines: 2,
                              overflow: TextOverflow.ellipsis,
                              style: StylesUtils.customTextStyle(
                                  color: ColorsUtils.color3333,
                                  fontSize: StylesUtils.fontSize13,
                                  lineHeight: 1.3.h),
                            ),
                          ),
                          Container(
                            margin: const EdgeInsets.only(top: 10),
                            alignment: Alignment.centerLeft,
                            child: Wrap(
                              spacing: 15,
                              crossAxisAlignment: WrapCrossAlignment.center,
                              alignment: WrapAlignment.start,
                              children: [
                                Text(
                                  '￥58.50',
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.color3333,
                                      fontSize: StylesUtils.fontSize13),
                                ),
                                Text(
                                  '已好评',
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.color3333,
                                      fontSize: StylesUtils.fontSize13),
                                )
                              ],
                            ),
                          )
                        ],
                      ),
                    ))
                  ],
                ),
                Padding(
                  padding: const EdgeInsets.only(top: 15),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Expanded(
                          child: Wrap(
                        spacing: 15,
                        crossAxisAlignment: WrapCrossAlignment.center,
                        alignment: WrapAlignment.start,
                        children: [
                          Text.rich(TextSpan(children: [
                            WidgetSpan(
                                child: Icon(
                                  Icons.remove_red_eye_sharp,
                                  size: 20,
                                  color: ColorsUtils.parseColorFromHexString(ColorsUtils.color9999),
                                ),
                                alignment: PlaceholderAlignment.middle),
                            TextSpan(
                                text: ' 30',
                                style: StylesUtils.customTextStyle(color: ColorsUtils.color9999))
                          ])),
                          Text.rich(TextSpan(children: [
                            WidgetSpan(
                                child: SvgUtils.assetName('u14872', width: 15, height: 15),
                                alignment: PlaceholderAlignment.middle),
                            TextSpan(
                                text: ' 18',
                                style: StylesUtils.customTextStyle(color: ColorsUtils.color9999))
                          ])),
                          Text.rich(TextSpan(children: [
                            WidgetSpan(
                                child: SvgUtils.assetName('u14875', width: 17, height: 15),
                                alignment: PlaceholderAlignment.middle),
                            TextSpan(
                                text: ' 12',
                                style: StylesUtils.customTextStyle(color: ColorsUtils.color9999))
                          ])),
                        ],
                      )),
                      TextButton(
                          onPressed: () {},
                          style: ButtonStyle(
                              minimumSize: const MaterialStatePropertyAll(Size(70, 30)),
                              padding: const MaterialStatePropertyAll(EdgeInsets.zero),
                              alignment: Alignment.center,
                              shape: MaterialStatePropertyAll(RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(5),
                                  side: BorderSide(
                                      color: ColorsUtils.parseColorFromHexString(
                                          ColorsUtils.colorF048))))),
                          child: Text(
                            '写追评',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.colorF048, fontSize: StylesUtils.fontSize13),
                          )),
                    ],
                  ),
                )
              ],
            ),
          ),
      ],
    );
  }
}
